<template>

  <div style="height: 100%;overflow:scroll; background-color: #f5f5f5;padding: 0 0 60px 0;font-size: 14px;">
    <header>
      <div>
        <div class="header">
          <div class="user_content">
            <div class="logoContent show_logo_content">
              <a class="header_logo_goHome" @click="homePage">
                <img id="all_top_icon" src="../../../public/img/5d811034-b989-43a5-98cc-82df4bace7de.png"
                  style="height:49px;margin-top:-6px;">
              </a>
              <p id="all_top_title" style="margin-left:12px">结算</p>
            </div>
            <div class="userinfo login" style="display: block;">
              <a class="header_goHome" @click="homePage">
                <span class="toIndex">
                  返回首页
                </span>
              </a>
              <span v-if="userInfo && userInfo.id">|</span>
              <a v-if="userInfo && userInfo.id" class="header_goUser">
                <span class="username">{{ userInfo.nickname }}</span>
              </a>
              |
              <a class="header_order">
                <span class="order">
                  我的订单
                </span>
              </a>|
              <span class="logout" v-if="userInfo && userInfo.id" @click="logoutFun">退出</span>
              <span class="logout" v-if="!userInfo || !userInfo.id" @click="loginPage">登录</span>
            </div>
          </div>
        </div>

      </div>
    </header>

    <div class="contain-box" style="background-color: #FFFFFF;margin-top: 20px;">
      <div class="checkout-main" style="">
        <div class="checkout-detail">
          <div class="fixed-header" style="display: none;">
            <div class="fixed-address-choose">
              <a class="choose-btn btn btn-primary">选择该收货地址</a>
              <div class="address-title">
                <span class="address-desc"></span>
                <span class="address-desc"></span>
                <!---->
              </div>
            </div>
          </div>
          <div class="detail-section address-detail">
            <div class="address-header">
              <span class="header-title">收货地址</span>
              <!---->
              <!---->
              <!---->
              <!---->
              <!---->
            </div>
            <!---->
            <div class="address-list show-less-list" style="">
              <!---->
              <div v-for="(item, index) in addresslist" class="address-item" @click="selectAddr(item)"
                :class="{ selectedbox: selectedaddressid == item.id }">
                <div class="address-info">
                  <div class="name" style="padding:10px"><span style="color: rgb(176, 176, 176);">{{ item.name }}</span>
                  </div>
                  <div class="tel">{{ item.phonenumber }}</div>
                  <div class="address-con">
                    <span>{{ item.province }}</span>
                    <span>{{ item.city }}</span>
                    <span>{{ item.district }}</span>
                    <span class="info">{{ item.detailedaddress }}</span>
                  </div>
                  <!-- <div class="address-action">
                    <span>修改</span>
                  </div> -->
                </div>
                <div class="address-info-solt" style="display: none;"></div>
              </div>
              <div v-if="addresslist.length<6" class="address-item" @click="openAddrModal">
                <div class="add-desc">
                  <i class="iconfont iconfont-plus el-icon-circle-plus-outline"></i>
                  <span>添加新地址</span>
                </div>
              </div>
              <!---->
            </div>
          </div>
          <!---->
          <div class="detail-section">
            <div class="detail-header">商品及优惠券</div>
            <div class="goods-list">
              <div class="good-item" v-for="(item, index) in products" :key="index">
                <div class="item-desc good-img">
                  <img :src="'api/' + item.image">
                </div>
                <div class="item-desc good-name">
                  <a>
                    <span>{{ item.name }}</span>
                  </a>
                </div>
                <div class="item-desc price-box">
                  <div class="item-desc good-price">{{ item.price.toFixed(2) }}元 x {{ item.quantity }}</div>
                  <div class="item-desc good-status"></div>
                  <div class="item-desc good-total">{{ (item.price * item.quantity).toFixed(2) }}元</div>
                </div>
              </div>
            </div>
          </div>
          <div class="detail-section">
            <div class="section-options section-shipment">
              <div class="options-desc options-header">
                <div class="title">配送方式</div>
              </div>
              <div class="options-desc options-body">
                <div class="options-list">
                  <div class="options-item selected">包邮</div>
                </div>
              </div>
            </div>
            <div class="section-options section-invoice">
              <div class="options-desc options-header">
                <div class="title">发票</div>
              </div>
              <div class="options-desc options-body">
                <div class="options-list">
                  <div class="options-item selected">电子普通发票</div>
                  <div class="options-item selected">个人</div>
                  <div class="options-item selected">商品明细</div>
                  <a class="options-item selected">修改 &gt;</a>
                </div>
              </div>
            </div>
          </div>
          <div class="detail-section count-detail">
            <!---->
            <div class="section-discount">
              <div class="discount-coupon">
                <!---->
                <div class="coupon-title coupon-title_recommend has-choose">
                  <i class="iconfont icon-selected el-icon-circle-check"></i>
                  <span class="use-coupon">正在使用：【新人专享】60元优惠券（满1000元可用）</span>
                  <span class="recommend-text">已选推荐优惠</span>
                  <!---->
                  <!---->
                  <a class="change-btn">修改 &gt;</a>
                </div>
                <!---->
              </div>
            </div>
            <div class="section-bill">
              <div class="bill-item">
                <div class="bill-name">商品件数：</div>
                <div class="bill-money">{{ totalNum }}件</div>
              </div>
              <!---->
              <!---->
              <div class="bill-item">
                <div class="bill-name">商品总价：</div>
                <div class="bill-money">{{ totalPrice.toFixed(2) }}元</div>
              </div>
              <!---->
              <div class="bill-item">
                <div class="bill-name">活动优惠：</div>
                <div class="bill-money">-0元</div>
              </div>
              <div class="bill-item">
                <div class="bill-name">优惠券抵扣：</div>
                <div class="bill-money">0元</div>
              </div>
              <!---->
              <!---->
              <!---->
              <div class="bill-item">
                <div class="bill-name">运费：</div>
                <div class="bill-money">0元</div>
              </div>
              <div class="bill-item total-price">
                <div class="bill-name">应付总额：</div>
                <div class="bill-money">
                  <em>{{ (totalPrice).toFixed(2) }}</em>元
                </div>
              </div>
            </div>
          </div>
          <div class="detail-section footer-detail clearfix">
            <!---->
            <div class="handle-action">
              <div class="operating-button">
                <a class="btn btn-primary" @click="submitorder">提交订单</a>
                <a class="btn btn-return" @click="toCar">返回购物车</a>
              </div>
              <!---->
              <!---->
            </div>
          </div>
        </div>
      </div>

      <el-dialog title="添加收货地址" :visible.sync="addrModal" width="800px" center>
        <div>
          <el-form class="login-form" :rules="rules" ref="addrForm" :model="form" label-width="20px">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="receivername">
                  <el-input v-model="form.receivername" placeholder="收件人姓名" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="phonenumber">
                  <el-input v-model="form.phonenumber" placeholder="手机号" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="province">
                  <el-select v-model="form.provincecode" placeholder="选择省" clearable style="width: 100%;"
                    @change="selProvince">
                    <el-option v-for="item in provincesAll" :key="item.adcode" :label="item.name" :value="item.adcode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="city">
                  <el-select v-model="form.citycode" placeholder="选择市" clearable style="width: 100%;" @change="selCity">
                    <el-option v-for="item in citys" :key="item.adcode" :label="item.name" :value="item.adcode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="district">
                  <el-select @change="selDistrict" v-model="form.districtcode" placeholder="选择区" clearable style="width: 100%;">
                    <el-option v-for="item in districts" :key="item.adcode" :label="item.name" :value="item.adcode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="detailedaddress">
                  <el-input v-model="form.detailedaddress" type="textarea" placeholder="详细地址" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item prop="tag">
                  <el-input v-model="form.name" placeholder="地址标签" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div style="text-align: center;">
                  <el-button type="primary" style="background-color: #DF2625;border-color: #DF2625;width: 160px;"
                    @click="saveAddr">确定</el-button>
                  <el-button type="primary" style="width: 160px;" plain @click="addrModal = false;form={}">取消</el-button>
                </div>
              </el-col>
            </el-row>

          </el-form>
        </div>
      </el-dialog>

    </div>
  </div>

</template>

<script>
import api from '@/api/';
import data from '@/data/data.js';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      selectedaddressid: 6,
      addresslist: [],
      addrModal: false,
      form: {},
      userInfo: {},
      rules: {
        receivername: [
          { required: true, message: "请输入收货人姓名", trigger: "change" }
        ],
        phonenumber: [
          { required: true, message: "请输入手机号", trigger: "change" }
        ],
        provincecode: [
          { required: true, message: "请选择省", trigger: "change" }
        ],
        citycode: [
          { required: true, message: "请选择市", trigger: "change" }
        ],
        districtcode: [
          { required: true, message: "请选择区", trigger: "change" }
        ],
        detailedaddress: [
          { required: true, message: "请收入详细地址", trigger: "change" }
        ]
      },
      totalNum: 0,
      totalPrice: 0,
      products: [],
      params: [],
      provinces: [],
      citys: [],
      districts: [],
      provincesAll: [
        { code: '1', name: '广东省' },
        { code: '2', name: '安徽省' },
        { code: '3', name: '北京市' },
        { code: '4', name: '福建省' },
        { code: '5', name: '甘肃省' }
      ],
      citysAll: [
        { parentCode: '1', code: '11', name: '潮州市' },
        { parentCode: '1', code: '12', name: '东莞市' },
        { parentCode: '1', code: '13', name: '佛山市' },
        { parentCode: '1', code: '14', name: '广州市' },
        { parentCode: '1', code: '15', name: '河源市' },

        { parentCode: '2', code: '21', name: '安庆市' },
        { parentCode: '2', code: '23', name: '池州市' },
        { parentCode: '2', code: '22', name: '蚌埠市' },
        { parentCode: '2', code: '24', name: '滁州市' },
        { parentCode: '2', code: '25', name: '阜阳市' }
      ],
      districtsAll: [
        { parentCode: '14', code: '141', name: '白云区' },
        { parentCode: '14', code: '142', name: '从化区' },
        { parentCode: '14', code: '143', name: '番禺区' },
        { parentCode: '14', code: '144', name: '海珠区' },
        { parentCode: '14', code: '145', name: '花都区' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  async mounted() {
    const resultuser = await api.get("api/user/userinfo");
    this.userInfo = resultuser.data;
    //this.initOrders();
    //收货地址的处理
    this.initOrdersAddress();
    // const addrList = await api.get("api/user/address");
    // this.addresslist = addrList.data;
    // console.log(this.addresslist);
    // this.addresslist.forEach((item) => {
    //   if (item.isdefault == 1) {
    //     this.selectedaddressid = item.id;
    //   }
    // });
    //购买的商品的信息
    const param = this.$route.query.products;
    //1_2,3_4,34_8
    param.split(",").forEach((item) => {
      //1_2
      let pro = {};
      let arr = item.split("_");
      pro.productid = arr[0];
      pro.quantity = arr[1];
      this.params.push(pro);
    })

    //item {productid:商品id     quantity:数量}
    //products 是绑定的数据   将每一个商品查询出来push到对象中即可
    this.params.forEach(async (item) => {
      console.log(item);
      let result = await api.get("api/goods/" + item.productid);//{code,msg,data}
      let pro = result.data;
      pro.quantity = item.quantity;
      this.products.push(pro);

      this.totalNum += Number(item.quantity);
      this.totalPrice += Number(pro.price) * Number(item.quantity);
    });

    //获取省市区
    this.provincesAll=await this.getArea("100000");

  },
  methods: {
    async initOrdersAddress(){
      const addrList = await api.get("api/user/address");
      this.addresslist = addrList.data;
      console.log(this.addresslist);
      this.addresslist.forEach((item) => {
        if (item.isdefault == 1) {
          this.selectedaddressid = item.id;
        }
      });
    },
    async getArea(keyword){
      const resultarea=await api.get("/api/user/area",{keyword:keyword});
      console.log(resultarea);
      return resultarea.data.districts[0].districts;
    },
    async getCity(keyword){
      this.citys=await this.getArea(keyword);
    },

    async submitorder() {
      //提交订单
      //订单明细(商品id,数量....)--优惠卷--收货地址(id)
      let orderitems = [];
      this.products.forEach((item) => {
        let obj = {};
        obj.productsid = item.id;
        obj.quantity = item.quantity;
        orderitems.push(obj);
      });
      let addrid = this.selectedaddressid;
      const result = await api.postJson("api/order/", { details: orderitems, addr: { id: addrid } });
      if (result.code == 200) {
        this.$router.push({ path: '/payment',query:{
          orderid:result.data
        } });
      }
    },
    selectAddr(addr) {
      console.log(addr);
      this.selectedaddressid = addr.id;
      console.log(this.selectedaddressid);
    },
    //选择省
    async selProvince() {
      console.info(this.form.province);
      this.citys =await this.getArea(this.form.provincecode);
      this.provincesAll.forEach(item=>{
        if(this.form.provincecode==item.adcode){
          this.form.province=item.name
        }
      });
      
      
    },
    //选择市
   async selCity() {
      this.districts =await this.getArea(this.form.citycode);
      this.citys.forEach(item=>{
        if(this.form.citycode==item.adcode){
          this.form.city=item.name
        }
      });
    },
    selDistrict() {
      this.districts.forEach(item=>{
        if(this.form.districtcode==item.adcode){
          this.form.district=item.name
        }
      });
    },
    homePage() {//首页
      this.$router.push({ path: '/' });
    },
    loginPage() {//登录注册
      this.$router.push({ path: '/login' });
    },
    //初始化订单
    initOrders() {
      let value = this.$route.query.value;
      if (value) {
        let arr = value.split('*');
        arr.forEach((item) => {
          let paramArr = item.split('_');
          data.products.forEach((product) => {
            if (product.id == paramArr[0]) {
              product['num'] = paramArr[1];
              this.totalNum += parseInt(paramArr[1]);
              this.totalPrice += parseInt(paramArr[1]) * product.price;
              this.products.push(product);
            }
          })
        });
      }
    },
    openAddrModal() {
      this.addrModal = true;
      if (this.$refs['addrForm']) {
        this.$refs['addrForm'].resetFields();
      }
      this.form = {};
      this.citys = [];
      this.districts = [];
    },
   async saveAddr() {//添加地址
      this.$refs.addrForm.validate(async (valid) => {
        if (valid) {
          console.log("2222222");
          const formdata=this.form;
           const result= await api.postJson("api/user/address",this.form);
           if(result.code==200){
            this.initOrdersAddress();
            this.form={};
            his.addrModal = false;
           }
        }else{
          console.log("1111111");
        }
        
      });
    },
    toCar() {//返回购物车
      this.$router.push({ 'path': '/cart' });
    },
    async logoutFun() {//退出登录
      this.$confirm("确定退出登录?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const result = await api.postForm("/api/user/loginout");
          sessionStorage.removeItem("Authorization")
          this.$notify({
            title: '提示',
            message: '退出成功',
            type: 'success'
            //duration: 0//为0则不会自动关闭
          });
          //清除用户信息缓存

          this.$router.push({ path: '/' });
        })
    }
  }
}
</script>

<style scoped>
.header {
  margin: 0 auto;
  padding-top: 0px;
  background: #f9f9f9;
  height: 50px;
  line-height: 48px;
  border-bottom: solid 1px #d2d2d2;
}

.user_content {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}

.logoContent {
  float: left;
  vertical-align: top;
}

a {
  text-decoration: none;
  color: #000;
}

a {
  text-indent: 0px;
  cursor: pointer;
}

.logoContent p,
.logoContent img {
  display: inline-block;
}

.logoContent img {
  vertical-align: middle;
}

img {
  max-width: 100%;
  max-height: 100%;
}

img,
fieldset,
input {
  border: 0;
  outline: transparent;
}

.logoContent p,
.logoContent img {
  display: inline-block;
}

.logoContent p {
  font-size: 20px;
  line-height: 48px;
}

ul,
li,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.userinfo {
  float: right;
}

.userinfo span {
  padding: 0 5px;
  cursor: pointer;
}


.checkout-detail {
  position: relative;
  padding: 48px 0 0;
}

.checkout-detail .fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 70px;
  border-top: 1px solid #e0e0e0;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.checkout-detail .fixed-header .fixed-address-choose {
  position: relative;
  width: 1226px;
  margin: 0 auto;
}

.checkout-detail .fixed-header .fixed-address-choose .choose-btn {
  float: right;
}

.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.checkout-detail .fixed-header .fixed-address-choose .address-title {
  margin: 15px 0 0;
  line-height: 40px;
  color: #757575;
}

.checkout-detail .fixed-header .fixed-address-choose .address-title .address-desc {
  display: inline-block;
  margin-right: 25px;
}

.checkout-detail .detail-section {
  position: relative;
  padding: 0 24px;
}

.checkout-detail .address-detail .address-header {
  margin: 0 0 20px;
}

.checkout-detail .address-detail .address-header .header-title {
  color: #333;
  font-size: 18px;
  line-height: 20px;
}

.address-list .address-item {
  display: inline-block;
  width: 267px;
  height: 178px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  position: relative;
  margin-right: 17px;
  margin-bottom: 20px;
  vertical-align: top;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.address-list .address-action,
.address-list .address-info,
.address-list .telephone {
  line-height: 22px;
  color: #757575;
}

.address-list .address-info {
  padding: 15px 24px 0;
}

.address-list .name {
  font-size: 18px;
  color: #333;
  line-height: 30px;
  margin-bottom: 10px;
}

.address-list .name span {
  float: right;
  font-size: 14px;
  color: #757575;
}

.address-list .address-action {
  text-align: right;
  position: absolute;
  right: 24px;
  bottom: 10px;
  opacity: 0;
}

.address-list .address-action,
.address-list .address-info,
.address-list .telephone {
  line-height: 22px;
  color: #757575;
}

.address-list .address-con span {
  display: inline-block;
  margin-right: 3px;
  word-wrap: break-word;
}

.address-list .address-con .info {
  width: 100%;
}

.address-list .address-action span {
  color: #DF2625;
  margin-left: 10px;
}

.address-list .add-desc {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  color: #b0b0b0;
}

.address-list .iconfont {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 8px;
  font-size: 30px;
  line-height: 30px;
  background-color: #e0e0e0;
  border-radius: 17px;
  text-align: center;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  color: #fff;
}

/*.iconfont-plus:before {*/
/*  content: "\E609";*/
/*}*/
.checkout-detail .detail-section {
  position: relative;
  padding: 0 24px;
}

.checkout-detail .detail-section .detail-header {
  color: #333;
  font-size: 18px;
  line-height: 40px;
}

.goods-list {
  padding: 5px 0;
  border-bottom: 1px solid #e0e0e0;
}

.goods-list .good-item {
  position: relative;
  padding: 15px 0;
}

.goods-list .good-item .good-img {
  width: 60px;
  height: 60px;
  margin: 0 10px 0 0;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-img img {
  width: 60px;
  height: 60px;
}

img {
  border: 0;
}

.goods-list .good-item .good-name {
  width: 600px;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-name a {
  color: #424242;
}

a,
a:hover {
  text-decoration: none;
}

.goods-list .good-item .good-name a {
  color: #424242;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-price {
  width: 150px;
  text-align: center;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-status {
  width: 100px;
  text-align: center;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.goods-list .good-item .good-total {
  width: 190px;
  text-align: right;
  color: #ff6701;
}

.goods-list .good-item .item-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  color: #424242;
  vertical-align: middle;
}

.checkout-detail .detail-section .section-options {
  padding: 25px 0;
  border-bottom: 1px solid #e0e0e0;
}

.checkout-detail .detail-section .section-options .options-header {
  width: 150px;
}

.checkout-detail .detail-section .section-options .options-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.checkout-detail .detail-section .section-options .options-header .title {
  color: #333;
  font-size: 18px;
  line-height: 38px;
}

.checkout-detail .detail-section .section-options .options-desc {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.checkout-detail .detail-section .section-options .options-list {
  width: 960px;
}

.checkout-detail .detail-section .section-options .options-list .selected {
  border-color: #fff;
  color: #DF2625;
}

.checkout-detail .detail-section .section-options .options-list .options-item {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  margin-right: 14px;
  border: 1px solid #fff;
  color: #333;
}

.checkout-detail .detail-section .section-options:last-child {
  border: none;
}

.checkout-detail .detail-section .section-options .options-list a {
  cursor: pointer;
}

.checkout-detail .count-detail {
  position: relative;
  min-height: 200px;
  padding: 20px 0;
  margin: 0 48px;
}

.checkout-detail .count-detail .section-discount {
  position: absolute;
  left: 0;
  top: 20px;
}

.checkout-detail .count-detail .discount-coupon,
.checkout-detail .count-detail .discount-redpacket,
.checkout-detail .count-detail .position-box {
  position: relative;
}

.checkout-detail .count-detail .coupon-title.has-choose {
  color: #424242;
  cursor: text;
}

.checkout-detail .count-detail .coupon-title.coupon-title_recommend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.checkout-detail .count-detail .coupon-title {
  display: inline-block;
  height: 50px;
  cursor: pointer;
}

.checkout-detail .count-detail .icon-selected {
  position: relative;
  color: #83c44e;
  margin: 0 5px 0 0;
  font-size: 22px;
  vertical-align: middle;
  line-height: 20px;
}

checkout-detail .count-detail .coupon-title.coupon-title_recommend .use-coupon {
  line-height: 20px;
  max-width: 800px;
}

.checkout-detail .count-detail .coupon-title.coupon-title_recommend .over-price-text,
.checkout-detail .count-detail .coupon-title.coupon-title_recommend .recommend-text {
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  color: #DF2625;
  border-radius: 3px;
  border: 1px solid #DF2625;
  margin: 0 10px 0 15px;
  padding: 0 3px;
}

.checkout-detail .count-detail .coupon-title.coupon-title_recommend .change-btn {
  line-height: 20px;
}

.checkout-detail .count-detail .coupon-title.has-choose a {
  color: #DF2625;
  margin-left: 5px;
}

.checkout-detail .count-detail .discount-coupon,
.checkout-detail .count-detail .discount-redpacket,
.checkout-detail .count-detail .position-box {
  position: relative;
}

.checkout-detail .count-detail .coupon-title {
  display: inline-block;
  height: 50px;
  cursor: pointer;
}

.checkout-detail .count-detail .icon-plus {
  position: relative;
  display: inline-block;
  margin: 0 10px 0 0;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  vertical-align: middle;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  text-align: center;
  background-color: #DF2625;
}

.checkout-detail .count-detail .section-bill {
  position: absolute;
  right: 0;
  bottom: 20px;
}

.checkout-detail .count-detail .section-bill .bill-item {
  position: relative;
  padding-left: 126px;
  line-height: 2;
  text-align: right;
}

.checkout-detail .count-detail .section-bill .bill-item .bill-name {
  position: absolute;
  top: 0;
  left: 0;
  width: 126px;
  white-space: nowrap;
  color: #757575;
}

.checkout-detail .count-detail .section-bill .bill-item .bill-money {
  color: #DF2625;
}

.checkout-detail .count-detail .section-bill .total-price {
  margin: 10px 0 0;
}

.checkout-detail .count-detail .section-bill .bill-item .bill-money em {
  font-style: normal;
}

.checkout-detail .count-detail .section-bill .total-price em {
  font-size: 30px;
  line-height: 1;
}

.checkout-detail .footer-detail {
  padding: 20px 48px;
  border-top: 2px solid #f5f5f5;
}

.checkout-detail .detail-section {
  position: relative;
  padding: 0 24px;
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}

.checkout-detail .footer-detail {
  height: 80px;
}

.checkout-detail .footer-detail .handle-action {
  float: right;
  margin-top: 20px;
}

.checkout-detail .footer-detail .handle-action .operating-button {
  overflow: hidden;
}

.checkout-detail .footer-detail .handle-action .btn {
  float: right;
  margin-left: 30px;
  vertical-align: top;
}

.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.checkout-detail .footer-detail .handle-action .btn {
  float: right;
  margin-left: 30px;
  vertical-align: top;
}

.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all .4s;
  transition: all .4s;
}

a {
  background-color: rgba(0, 0, 0, 0);
}

.address-list .address-item:hover {
  border-color: #b0b0b0;
}

.checkout-detail .detail-section .section-options .options-list .selected {
  border-color: #fff;
  color: #DF2625;
}

.btn-primary {
  background: #DF2625;
  border-color: #DF2625;
  color: #fff;
}

.btn-primary:hover {
  background-color: #DF2625;
  border-color: #DF2625;
  color: #fff;
}

.el-select-dropdown__item {
  padding: 0 20px !important;
}

.selectedbox {
  border: 1px solid green !important;
}
</style>
